import { Movie } from '@/model/room/types';
import { Text, Video, View } from '@tarojs/components';
import React, { ReactElement } from 'react';
import {
  AtButton,
  AtFab,
  AtFloatLayout,
  AtInput,
  AtList,
  AtMessage,
  AtNoticebar,
} from 'taro-ui';
import './live.scss';

interface Props {
  isOpened: boolean;
  handleOpen: () => void;
  handleClose: () => void;
  movies: Movie[];
  onUrlChange: (value: string) => void;
  url: string;
  handleAdd: () => void;
  playUrl: string;
  onPlay: () => void;
  onEnded: () => void;
  onError: (value: any) => void;
  onPause: () => void;
  onReLoad: () => void;
  env: string;
  onTimeUpdate: (e) => void;
  handleDeleteMovie: (item: Movie) => void;
  handlePlay: (item: Movie) => void;
}

const perfix = 'live_view_admin';

// 房主
const LiveAdmin = ({
  onReLoad,
  handleClose,
  isOpened,
  handleOpen,
  movies,
  url,
  onUrlChange,
  handleAdd,
  playUrl,
  onPlay,
  onEnded,
  onError,
  onPause,
  env,
  onTimeUpdate,
  handleDeleteMovie,
  handlePlay,
}: Props): ReactElement => (
  <View className={`${env}_${perfix}`}>
    <View className={`${env}_video_admin`}>
      <Video
        id={`${env}_video_admin`}
        src={playUrl}
        initialTime={0}
        controls
        autoplay={false}
        direction={90}
        loop={false}
        muted={false}
        onPlay={onPlay}
        onEnded={onEnded}
        onError={onError}
        onPause={onPause}
        onTimeUpdate={onTimeUpdate}
      />
    </View>

    <View>
      <AtButton onClick={onReLoad}>同步</AtButton>
    </View>

    <AtNoticebar marquee>施工中ing</AtNoticebar>

    <AtFab onClick={handleOpen}>
      <Text className="at-fab__icon at-icon at-icon-menu"></Text>
    </AtFab>

    <AtFloatLayout
      isOpened={isOpened}
      title="电影列表管理"
      onClose={handleClose}
    >
      <AtList>
        {movies.map((item) => (
          <View key={item.id}>
            <Text>{item.url}</Text>
            <View className={`${env}_${perfix}_button`}>
              <AtButton
                onClick={() => handleDeleteMovie(item)}
                size="small"
              >
                删除
              </AtButton>
              <AtButton
                onClick={() => handlePlay(item)}
                size="small"
              >
                播放
              </AtButton>
            </View>
          </View>
        ))}
      </AtList>

      <AtInput
        clear
        // title="视频地址"
        type="text"
        maxlength={500}
        placeholder="请输入视频地址"
        name="url"
        value={url}
        onChange={(value) => onUrlChange(String(value))}
      >
        <AtButton onClick={handleAdd}>添加</AtButton>
      </AtInput>
    </AtFloatLayout>

    <AtMessage />
  </View>
);

export default LiveAdmin;
